<!--
 * @Description: 
 * @Author: 
 * @Date: 2021-05-14 19:21:33
 * @LastEditors: zy
 * @LastEditTime: 2021-05-14 19:21:33
-->
<!--
 * @Description: 
 * @Author: 
 * @Date: 2021-05-14 18:12:50
 * @LastEditors: zy
 * @LastEditTime: 2021-05-14 19:16:29
-->
<!--
 * @Description: 管理员管理用户信息
 * @Author: tyq
 * @Date: 2021-02-21 15:56:47
 * @LastEditors: zy
 * @LastEditTime: 2021-03-12 17:52:44
-->
<template>
    <div>
      <div size="small">
        <el-button size="small" style="margin-top: 10px" type="primary" @click="addUser()">添加</el-button>
          <el-radio-button style="margin-top: 10px;margin-left:10px" disabled>批量删除</el-radio-button>
            <el-input
              style="margin-left:30px"
              size="small"
              class="searchInput"
              placeholder="请输入要查询的用户信息"
              suffix-icon="el-icon-search"
              @keydown.enter.native="searchBook"
              v-model="pos.name">
            </el-input>
          <el-button size="small" type="primary" @click="searchBook">查询</el-button>
        </div>
        <div class="searchMain">
            <el-table
            border
            stripe
            size="small"
            :data="user"
            @selection-change="handleSelectionChange"
            style="width: 96%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="用户名"
              width="150">
            </el-table-column>
            <el-table-column
              prop="user_id"
              label="id"
              width="150">
            </el-table-column>
            <el-table-column
              prop="realName"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="userAge"
              label="年龄">
            </el-table-column>
            <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
</template>
<script>
export default {
  name: 'searchBook',
  data () {
    return {
      pos: {
        userName: '',
        user_id: '',
        realName: '',
        userAge: ''
      },
      user: []
    }
  },
  mounted () {
    this.initUser()
  },
  methods: {
    // 添加用户
    addUser () {
      this.$router.replace('/index/signin')
    },
    // 编辑用户信息按钮
    handleEdit (index, data) {

    },
    // 删除用户按钮
    handleDelete (index, data) {

    },
    // 开始时表格显示用户信息
    initUser () {
      this.$http.get('users/initUser').then(resp => {
        if (resp) {
          this.user = resp.data
        }
      })
    }
  }
}
</script>
<style>
  .searchMain{
    margin-top: 20px;
  }
</style>
